<template>
  <div class="box">
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <Form-item prop="user">
        <Input type="text" v-model="formInline.user" placeholder="Entry username">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="password">
        <Input type="password" v-model="formInline.password" placeholder="Entry password">
          <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Button size="large" type="primary" @click="login('formInline')">登录</Button>
    </Form>


    <br><br><br>

    <Form :model="formItem" :label-width="80">
      <Form-item label="用户名">
        <Input type="text" placeholder="Please entry your nickname" v-model="formItem.nickname"></Input>
      </Form-item>
      <Form-item label="所在地">
        <Cascader :data="cityList" :load-data="formCity" v-model="formItem.city"></Cascader>
      </Form-item>
      <Form-item label="出生日期">
        <Date-picker v-model="formItem.bothDate"></Date-picker>
      </Form-item>
      <Form-item label="性别">
        <Radio-group v-model="formItem.six">
          <Radio label="male">男</Radio>
          <Radio label="female">女</Radio>
          <Radio label="secret">保密</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="爱好">
        <Checkbox-group v-model="formItem.hobby">
          <Checkbox label="吃饭"></Checkbox>
          <Checkbox label="睡觉"></Checkbox>
          <Checkbox label="跑步"></Checkbox>
          <Checkbox label="看电影"></Checkbox>
          <Checkbox label="打豆豆"></Checkbox>
        </Checkbox-group>
      </Form-item>
      <Form-item label="是否显示">
        <i-switch v-model="formItem.isShow" size="large">
          <span slot="open">显示</span>
          <span slot="close">关闭</span>
        </i-switch>
      </Form-item>
      <Form-item label="网龄（年）">
        <Slider v-model="formItem.netYears" range></Slider>
      </Form-item>
      <Form-item label="描述">
        <Input type="textarea" :autosize="false" :rows="10" v-model="formItem.desc"></Input>
      </Form-item>
      <Form-item label="提交">
        <Button @click="submitUserInfo" type="primary" long>提交</Button>
      </Form-item>
    </Form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      cityList: [],
      formInline: {
        user: '',
        password: ''
      },
      ruleInline:　{
        user: [
          { required: true, message: 'please entry your username', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'please entry your password', trigger: 'blur' },
          { type: 'string', min: 6, message: 'password than less six', trigger: 'blur' }
        ]
      },
      formItem: {
        nickname: '',
        city: [],
        bothDate: '1990-05-16',
        six: '',
        hobby: [],
        isShow: true,
        netYears: [5, 17],
        desc: ''
      }
    }
  },
  mounted () {
    this.cityList = this.resetCity(arrCity);
  },
  methods: {
    login (params) {
      console.log(this.formInline);
      console.log(this.formInline.user);
      console.log(this.formInline.password);
    },
    formCity (item, callback) {
      item.loading = true;
      item.children = this.resetCity(item.sub);
      item.loading = false;
      callback();
    },
    resetCity (params) { //分段获取地址信息
      var arr = new Array();
      for(var i = 0; i < params.length; i++) {
        var obj = {
          label: params[i].name,
          value: params[i].name
        }
        if(params[i].sub != undefined) {
          obj.index = i;
          obj.loading = false;
          obj.sub = params[i].sub;
          obj.children = [];
        }
        arr.push(obj);
      }
      return arr;
    },
    submitUserInfo () {
      console.log(this.formItem);
    }
  }
}
</script>

<style>

</style>